<template>
  <el-main class="basic-config">
    <div class="basic-box">
            <div class="basic-box-title">商家信息</div>
            <div class="basic-box-item sa-flex">
                <div class="basic-box-item-label">店铺名称</div>
                <div class="basic-box-item-text">鲸囍生活</div>
                <el-button type="text" class="basic-btn sa-m-l-10" @click="routerGo('/seller/admin/info/category')">修改</el-button>
            </div>
            <div class="basic-box-item sa-flex">
                <div class="basic-box-item-label">主营类目</div>
                <div class="basic-box-item-text">医疗保健</div>
                <el-button type="text" class="basic-btn sa-m-l-10" @click="routerGo('/seller/admin/info/category')">修改</el-button>
            </div>
            <div class="basic-box-item sa-flex">
                <div class="basic-box-item-label">店铺Logo</div>
                <div class="basic-img"></div>
            </div>
            <div class="basic-box-item sa-flex">
                <div class="basic-box-item-label"></div>
                <div class="basic-box-item-text-gray">图片尺寸要求为300*300的正方形图片，仅支持jpg和png，上传成功1个小时后可在商详等场景生效:</div>
            </div>
            <div class="basic-box-item sa-flex">
                <div class="basic-box-item-label">店铺简介：</div>
                <div class="basic-box-item-text-gray">店铺简介将显示在店铺列表中，限制在20个字以内，</div>
            </div>
            <div class="basic-box-item sa-flex">
                <div class="basic-box-item-label"></div>
                <el-input
                class="basic-input-textarea"
                type="textarea"
                autosize
                show-word-limit
                :maxlength="20"
                placeholder="请输入内容"
                v-model="textarea">
                </el-input>
            </div>
    </div>


          <el-dialog
            title="提示"
            v-model="centerDialogVisible"
            width="30%"
            center>
            <div class="diabody">使用 手机短信验证码</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
            </span> 
            </el-dialog>
  </el-main>
</template>

<script setup>
  import { reactive, onMounted, ref } from 'vue';
  import {api} from '../info.service'
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
  import { useRoute } from 'vue-router';

  const route = useRoute();

  const state = reactive({
    data: null,
  });
  const status = reactive({
    flag1:true,
    flag2:true
  })
  const centerDialogVisible = ref(false)
  const textarea = ref('')
  onMounted(() => {
    getData();
  });

  const getData = async () => {
    const {error,data} = await api.basic.info()
    if (error === 0) {
      state.data = data
    }
  };
  function routerGo(data) {
    router.push({
      path: data,
      query: {
        type: 'edit',
        id:data.id
      },
    });
  }
</script>

<style lang="scss" scoped>

  .basic-box {
    .basic-box-title {
      width: max-content;
      font-family: 'PingFangSC-Regular, sans-serif';
      color: #3D3D3D;
      z-index: 0;
      font-size: 20px;
      font-weight: bold;
    }
    .basic-box-title-h2{
        width: max-content;
        font-family: 'PingFangSC-Regular, sans-serif';
        color: #3D3D3D;
        z-index: 0;
        font-size: 20px;
        display: flex;
        align-items: center;
        .title-btn{
            font-size: 16px;
        }
    }

    .basic-box-title::after {
    //   pointer-events: none;
    //   content: "";
    //   position: absolute;
    //   height: 8px;
    //   background: var(--t-bg-active);
    //   bottom: 0;
    //   right: 0;
    //   left: 0;
    //   z-index: -1;
    }

    .basic-box-item {
      padding-left: 40px;
      margin-top: 20px;
      min-width: 800px;
      align-items: center;
      font-size: 14px;
      .basic-input-textarea{
        width: 600px;
      }
      .basic-input{
        width: 300px;
      }
      .basic-box-item-text-gray{
            color: #595959;
        }
      .basic-box-item-label {
        min-width: 100px;
        font-family: 'PingFangSC-Regular, sans-serif';
        font-size: 14px;
        margin-right: 20px;
        display: flex;
        justify-content: flex-end;
        span{
            color: red;
        }
      }

      .basic-box-item-text {
        font-family: 'PingFangSC-Regular, sans-serif';
        font-size: 14px;
        color: #3D3D3D;
        
      }

      .basic-box-item-image {
        width: 225px;
        height: 150px;
        margin-right: 40px;
      }
    }
  }
  .basic-flex{
    display: flex;
  }
  .diabody{
    width: 100%;
    text-align: center;
  }
  .basic-img{
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #D8D8D8;
  }
</style>
